{% extends 'base.html' %}
{% load static %}
{% block title %}
    程序设计
{% endblock %}

{% block mycss %}
    {{ block.super }}
    <link href="{% static 'css-theme/' %}{{ THEME }}{{ '/programing.css' }}" rel="stylesheet">
{% endblock %}

{% block content %}
    <style>
        ul, li {
            list-style: none;
        }
        #category-btn{
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; /*IE10*/
            -khtml-user-select: none; /*早期浏览器*/
            -o-user-select: none; /* Opera*/
            user-select: none;
        }
    </style>
    {% if category %}
        <h2 class="category-title">{{ category }}</h2>
    {% elif tag %}
        <h2 class="category-title">{{ tag }}</h2>
    {% endif %}
    <div class="rnav">
        {% for category in categories %}
            <li>
                <a id="category-btn" href="/articles/programing?category={{ category }}">{{ category }}</a>
            </li>
        {% endfor %}
    </div>
    <div style="margin-top: 24px; ">
        {% for article in articles %}
            {% include "article_list.html" %}
        {% endfor %}
    </div>
    <div class="pages">
        <a class="prev-page"><</a>
        <a class="next-page">></a>
        <label id="total-pages" style="margin-left: 0; margin-top: 6px">共{{total_pages}}页</label>
    </div>
    <script>
        let totalPages = parseInt({{ total_pages }});
        let curPage = parseInt({{ page }})

        /*分页处理太麻烦了，简单粗暴的方法往往更有效*/
        let idx = 1
        if (curPage <= 10) {
            idx = 1
        } else if (curPage <= 21) {
            idx = 11
        } else if (curPage <= 31) {
            idx = 21
        }

        for (let i = idx; i <= totalPages && i < idx + 10; i++) {
            let obj = $('<a href="#">' + i + '</a>').insertBefore($('.next-page'))
            console.log(obj.text())
            if (i === curPage) {
                obj.addClass('active');
            }
            {% if tag %}
                obj.attr('href', '/articles/programing?tag={{ tag }}&page=' + i)
            {% elif category %}
                {% if category == "程序设计" %}
                    obj.attr('href', '/articles/programing?page=' + i)
                {% else %}
                    obj.attr('href', '/articles/programing?category={{ category }}&page=' + i)
                {% endif %}
            {% endif %}
        }

        if (curPage === 1) {
            $('.prev-page').addClass('hidden')
        } else if (curPage === totalPages) {
            $('.next-page').addClass('hidden')
        }
        $('.pages > a').unbind('click').click(function (){
            let text = $(this).text()
            if (text === '<') {
                window.location.href = "/?page=" + (curPage - 1)
            } else if (text === '>') {
                window.location.href = "/?page=" + (curPage + 1)
            } else {
                let pageId = parseInt($(this).text());
            }
        })
        if (totalPages <= 10) {
            $('#total-pages').css('visibility', 'hidden')
            $('.prev-page').css('visibility', 'hidden')
            $('.next-page').css('visibility', 'hidden')
        }
        if (totalPages < 2 || totalPages === undefined) {
            $('.pages').css('visibility', 'hidden')
        }

        {#$(document).ready(function(){#}
        {#    $(".article-pic").each(function() {#}
                {#所有的图标都是3*5#}
        {#        image_download_and_set($(this).attr("id"), "/articles/d_icon/?title=" + $(this).attr("title"))#}
        {#        let width =$(this).width()#}
        {#        $(this).height(width * 3 / 5)#}
        {#    })#}
        {#})#}
    </script>
{% endblock %}




